:host {
    .main {
        display    : flex;
        padding-top: 12px;
    }

    .left {
        max-width: 448px;
        min-width: 350px;
    }

    .right {
        flex    : 1;
        position: relative;

        .avatar {
            position     : absolute;
            left         : 104px;
            top          : 0;
            width        : 160px;
            height       : 160px;
            overflow     : hidden;
            border-radius: 50%;
            border       : 4px solid #EEE;
            box-sizing   : border-box;
            cursor       : pointer;


            img {
                width: 100%;
                height: 100%;
            }

            div {
                height             : 152px;
                width              : 152px;
                // line-height     : 152px;
                color              : #FFF;
                font-size          : 80px;
                line-height        : 140px;
                text-align         : center;
                // background-color: #f56a00;
            }
        }

        .over-avatar {
            position     : absolute;
            left         : 104px;
            top          : 0;
            width        : 160px;
            height       : 160px;
            text-align   : center;
            line-height  : 160px;
            overflow     : hidden;
            border-radius: 50%;
            border       : 4px solid #EEE;
            box-sizing   : border-box;
            cursor       : pointer;
            background   : rgba(0, 0, 0, 0.5);
            color        : #FFF;
            font-size    : 15px;
            opacity      : 0;
        }

        .over-avatar:hover {
            opacity: 1;
        }
    }
}